<%@ taglib prefix="s" uri="/struts-tags"%>
<jsp:include page="../../includes/libtags.jsp" />


<style type="text/css">
form .error { color:#F00 }
</style>

<script type="text/javascript">

var oTable;

	$(function() {
		$('#tabFormAuto').hide();
	/* Add a click handler to the rows - this could be used as a callback */
    $('#example tbody tr').live('click', function (e) {
        if ( $(this).hasClass('row_selected') ) {
            $(this).removeClass('row_selected');
        }
        else {
            oTable.$('tr.row_selected').removeClass('row_selected');
            $(this).addClass('row_selected');
        }
        
    });
     
    /* Add a click handler for the delete row */
    $('#delete').click( function() {
        var anSelected = fnGetSelected( oTable );
        if ( anSelected.length !== 0 ) {
            oTable.fnDeleteRow( anSelected[0] );
        }
    } );

oTable = $('#example').dataTable({
			"bJQueryUI": true,
			"sPaginationType" : "full_numbers",
			"bFilter" : false,
			"bProcessing": true,
			"fnDrawCallback": function(oSettings){
			  $('table#example td').bind('mouseenter', function () {
				   $(this).parent().children().each(function(){$(this).addClass('datatablerowhighlight');}); });
			  $('table#example td').bind('mouseleave', function () { 
			  	   $(this).parent().children().each(function(){$(this).removeClass('datatablerowhighlight');}); });
				   
			},
			"sAjaxSource": "/ProviasNacionalApp/autorizaciones-especiales/getVehiculos",
	        "aoColumns": [
	            { "mData": "idDetalleVehiculo" },
	            { "mData": "tipoUnidad" },
	            { "mData": "placa" },
	            { "mData": "modelo" },
	            { "mData": "marca" },
	            { "mData": "largo" },
	            { "mData": "ancho" },
	            { "mData": "alto" },
	            { "mData": "numeroEjes" },
	            { "mData": "numeroNeumaticos" },
	            { "mData": "pesoTara" }
	        ]
		
		});
	

    /* Add events */
    $('#example tbody tr').live('click', function () {
        var nTds = $('td', this);
        var id = $(nTds[0]).text();
        $("#btnEditar").attr('onclick',"editarFichaVehicular('"+id+"')");
        $("#btnEliminar").attr('onclick',"eliminar('"+id+"')");
        //alert(id);
    });
		
		$('#btnAgregarFormulario').click(function() {
		  $('#tabSolicitud').hide('slow', function() {
				$('#tabFormAuto').show('slow');
		  });
		});	
		
		$('#btnAgregarFormulario').click(function() {
			  $('#tabSolicitud').hide('slow', function() {
					$('#tabFormAuto').show('slow');
			  });
			  listarVehiculos();
			  listarMercancias();
			  listarTotales();
			});	
		
		
		$('#btnCancelarForm').click(function() {
		  $('#tabFormAuto').hide('slow', function() {
				$('#tabSolicitud').show('slow');
				callAjax("/ProviasNacionalApp/autorizaciones-especiales/cancelar-ficha-vehiculo",null,"cancelarFicha");
		  });
		});
		
		$("#infoEmpresa").load("/ProviasNacionalApp/empresas-transportes/buscar-empresa?idEmpresa="+$('#idEmpresa').val());
		listarRutas();
		//alert($('#idEmpresa').val());
		
		getUbigeo("/ProviasNacionalApp/ubigeo-getdepartamentos","idDepartamento_Origen","");
		getUbigeo("/ProviasNacionalApp/ubigeo-getdepartamentos","idDepartamento_Destino","");

		$('#idDepartamento_Origen').change(function() {
			param = $('#idDepartamento_Origen').val();
			getUbigeo("/ProviasNacionalApp/ubigeo-getprovincias?idDepartamento="+param,"idProvincia_Origen","provincia");

		});
		
		$('#idDepartamento_Destino').change(function() {
			param = $('#idDepartamento_Destino').val();
			getUbigeo("/ProviasNacionalApp/ubigeo-getprovincias?idDepartamento="+param,"idProvincia_Destino","provincia");

		});
		
		$('#idProvincia_Origen').change(function() {
			paramDp = $('#idDepartamento_Origen').val();
			param = $('#idProvincia_Origen').val();
			getUbigeo("/ProviasNacionalApp/ubigeo-getdistritos?idProvincia="+param+"&idDepartamento="+paramDp,"idOrigen","distrito");
		});	
		
		$('#idProvincia_Destino').change(function() {
			paramDp = $('#idDepartamento_Destino').val();
			param = $('#idProvincia_Destino').val();
			getUbigeo("/ProviasNacionalApp/ubigeo-getdistritos?idProvincia="+param+"&idDepartamento="+paramDp,"idDestiono","distrito");
		});	
		
		$( "#fechaSalida" ).datepicker({ 
			minDate: "+10D", 
			dateFormat:"dd-mm-yy",
			onClose: function( selectedDate ) {
	        $( "#fechaLlegad" ).datepicker( "option", "minDate", selectedDate );
	      	} 
		});
		
		$( "#fechaLlegad" ).datepicker({ 
			minDate: "+11D", 
			dateFormat:"dd-mm-yy",
		    onClose: function( selectedDate ) {
		          $( "#fechaSalida" ).datepicker( "option", "maxDate", selectedDate );
		        }
		
		});
		
		/*
		$("#formGenerarExpediente").validate({
			rules: {
				solicitud: "required"
				//"expediente.idOrigen": "required",
				//"expediente.idDestiono":"required",
				//"expediente.fechaSalida":"required",
				//"expediente.fechaLlegad":"required",
				//"expediente.apoyoPolicial":"required"
				}
		});
		*/
		
	       $('#formGenerarExpediente').validate({
	           rules: {
	        	    'solicitud': {required:true},
	        	    'expediente.idOrigen': {min: 1},
					'expediente.idDestiono':{min: 1},
					'expediente.fechaSalida':"required",
					'expediente.fechaLlegad':"required",
					'expediente.apoyoPolicial':"required"
	           },
	           messages: {
	        	   'solicitud': {required:'Adjunte el Archivo de Solicitud'},
	        	   'expediente.idOrigen': { min: 'Seleccione un Distrito de Origen'},
	        	   'expediente.idDestiono': { min: 'Seleccione un Distrito de Llegada'},
	        	   'expediente.fechaSalida': 'Ingrese una Fecha de Salida',
	        	   'expediente.fechaLlegad': 'Ingrese una Fecha de Llegada',
	        	   'expediente.apoyoPolicial': 'Seleccione si requiere o no Apoyo Policial'
	           },
	       debug: true,
	       submitHandler: function(form){
	    	   
	    	   if($("#idProvincia_Destino").val() == $("#idProvincia_Origen").val()){
	    		   alert('La provincia de llegada debe ser distinta a la provincia de salida');
	    	   }else{
				   				   
				   var ext = $('#solicitud').val().split('.').pop().toLowerCase();

					if($.inArray(ext, ['pdf']) == -1) {
					
					alert('El archivo debe de ser PDF.');
					}else{
						//alert('El formulario ha sido validado correctamente!');
						document.getElementById('formGenerarExpediente').submit();
					}
				   
	    		   
	    	   }
	       }
	    });
		
	       $('#formVehiculo').validate({
	           rules: {
					'marca':"required",
					'modelo':"required",
					'placa':"required",
					'largo':{
					      required: true,
					      number: true
					    },
					'ancho':{
					      required: true,
					      number: true
					    },
					'alto':{
					      required: true,
					      number: true
					    },
					'numeroEjes':{
					      required: true,
					      digits: true,
						  min:2,
						  max:12
					    },
					'numeroNeumaticos':{
					      required: true,
					      digits: true,
						  min:4,
						  max:96
					    },
					'pesoTara':{
					      required: true,
					      number: true
					    },

	           },
	           messages: {
	        	   'marca': "Ingrese la marca",
	        	   'modelo': 'Ingrese el modelo',
	        	   'placa': 'Ingrese el numero de placa',
	        	   'largo': { required: 'Ingrese el largo',number: 'Solo ingrese numeros'},
	        	   'ancho': { required: 'Ingrese el ancho',number: 'Solo ingrese numeros'},
	        	   'alto': { required: 'Ingrese el alto',number: 'Solo ingrese numeros'},
	        	   'numeroEjes': { required: 'Ingrese la cantidad de ejes',digits: 'Solo ingrese numeros enteros',min:'Minimo 2 ejes.',max:'Maximo 12 ejes'},
	        	   'numeroNeumaticos': { required: 'Ingrese la cantidad de neumaticos',digits: 'Solo ingrese numeros enteros',min:'Minimo 4 Neumaticos.',max:'Maximo 96 neumaticos'},
	        	   'pesoTara': { required: 'Ingrese el peso tara',number: 'Solo ingrese numeros'}
	           },
	       debug: true,
	       submitHandler: function(form){
	    	   //agregarVehiculo()
	    		  // alert('El formulario ha sido validado correctamente!');
				  
				if($('#tipoUnidad').val() == "-1"){
					 alert('Seleccione el tipo de unidad'); 
				}else{
					agregarVehiculo();
					
				}
					
	       }
	    });
		
		
	       $('#formMercancia').validate({
	           rules: {
					'largoMercancia':{
					      required: true,
					      number: true
					    },
					'anchoMercancia':{
					      required: true,
					      number: true
					    },
					'altoMercancia':{
					      required: true,
					      number: true
					    },
					'pesoMercancia':{
					      required: true,
					      number: true
					    },

	           },
	           messages: {
	        	   'largoMercancia': { required: 'Ingrese el largo',number: 'Solo ingrese numeros'},
	        	   'anchoMercancia': { required: 'Ingrese el ancho',number: 'Solo ingrese numeros'},
	        	   'altoMercancia': { required: 'Ingrese el alto',number: 'Solo ingrese numeros'},
	        	   'pesoMercancia': { required: 'Ingrese el peso tara',number: 'Solo ingrese numeros'}
	           },
	       debug: true,
	       submitHandler: function(form){
	    	   //agregarVehiculo()
	    		  // alert('El formulario ha sido validado correctamente!');
				  
				if($('#descripcionMercancia').val() == "-1"){
					 alert('Seleccione el tipo de mercancia'); 
				}else{
					agregarMercancia();
					
				}
					
	       }
	    });

	});

function generarExpediente(){
	alert($("#formGenerarExpediente").valid());
} 
	
function getUbigeo(url,id,type){
	
	$.getJSON(url,function(json) {
		//borramos el contenido de los option del select
		idDom = "#"+id;
		$(idDom).html("");
		$(idDom).append("<option value=\"-1\">-- Seleccione Opcion --</option>");
		//recorremos todas las filas del resultado del proceso que obtenemos en Json
		$.each(json, function(i, item) {
			//introducimos los option del Json obtenido
			if(type == "distrito"){
				$(idDom).append("<option value=\""+item.idUbigeo+"\">"+item.descripcion+"</option>");
			}else if(type == "provincia"){
				$(idDom).append("<option value=\""+item.codProvincia+"\">"+item.descripcion+"</option>");
			}else{
				$(idDom).append("<option value=\""+item.codDepartamento+"\">"+item.descripcion+"</option>");
			}			
		});
	});
	
}

function listarRutas(){
	$("#listRutas").load("/ProviasNacionalApp/autorizaciones-especiales/listado-rutas");
}

function listarMercancias(){
	$("#listMercancias").load("/ProviasNacionalApp/autorizaciones-especiales/listado-mercancias");
}

function listarTotales(){
	$("#listTotales").load("/ProviasNacionalApp/autorizaciones-especiales/listado-total");
}

function listarVehiculos(){
	$("#listVehiculos").load("/ProviasNacionalApp/autorizaciones-especiales/listado-vehiculos");
}

function agregarRuta(){
	
	if($('#ruta').val().trim() == ''){
		return;	
	}
	parametros = {ruta: $('#ruta').val()};
	
	callAjax("/ProviasNacionalApp/autorizaciones-especiales/agregar-ruta",parametros,"rutas");
	$('#ruta').val("");
}

function eliminarRuta(index){
	parametros = {indexItem: index};
	$("#listRutas").load("/ProviasNacionalApp/autorizaciones-especiales/eliminar-ruta",parametros);
}

function eliminarVehiculo(criterio){
	parametros = {criterioVehiculo: criterio};
	$("#listVehiculos").load("/ProviasNacionalApp/autorizaciones-especiales/eliminar-vehiculo",parametros);
}

function eliminarMercancia(index){
	parametros = {indexMercancia: index};
	$("#listMercancias").load("/ProviasNacionalApp/autorizaciones-especiales/eliminar-mercancia",parametros);
	listarTotales();
}

function editar(id){
	alert(id);
}
function eliminar(id){
	
		parametros = {
					"indexFichaVehicular": id
				 };
				 
	callAjax("/ProviasNacionalApp/autorizaciones-especiales/eliminar-ficha-vehiculo",parametros,"eliminarFicha");
	//alert(id);
}

function callAjax(url,params,oper){

$.getJSON(url, params, function(json){
		//alert(json.codeResult);
		if(json.codeResult == 'business_exception'){
			alert('[Excepcion de Negocio]: '+json.message);
		}else{
			callbackFN(oper);
		}
  });
	
}

function callbackFN(oper){
	switch(oper){
		case "rutas": listarRutas(); break;
		case "vehiculo": listarVehiculos(); listarTotales(); document.getElementById('formVehiculo').reset(); break;
		case "mercancia": listarMercancias(); listarTotales(); document.getElementById('formMercancia').reset(); break;
		case "eliminarFicha": reloadData(); break;
		case "editar_FichaVehicular": listarMercancias(); listarVehiculos(); listarTotales(); break;
		case "ficha_vehicular": 
								  $('#tabFormAuto').hide('slow', function() {
										$('#tabSolicitud').show('slow');
								  });
								  reloadData();
								break;
	}
}



function agregarVehiculo(){
	
	parametros = {
					"vehiculo.tipoUnidad": $('#tipoUnidad').val(),
					"vehiculo.marca": $('#marca').val(),
					"vehiculo.modelo": $('#modelo').val(),
					"vehiculo.placa": $('#placa').val(),
					"vehiculo.largo": $('#largo').val(),
					"vehiculo.ancho": $('#ancho').val(),
					"vehiculo.alto": $('#alto').val(),
					"vehiculo.numeroEjes": $('#numeroEjes').val(),
					"vehiculo.numeroNeumaticos": $('#numeroNeumaticos').val(),
					"vehiculo.pesoTara": $('#pesoTara').val()
				 };
	callAjax("/ProviasNacionalApp/autorizaciones-especiales/agregar-vehiculo",parametros,"vehiculo");
	
}


function agregarMercancia(){
	
	parametros = {
					"mercancia.descripcion": $('#descripcionMercancia').val(),
					"mercancia.largo": $('#largoMercancia').val(),
					"mercancia.ancho": $('#anchoMercancia').val(),
					"mercancia.alto": $('#altoMercancia').val(),
					"mercancia.peso": $('#pesoMercancia').val()
				 };
	 
	callAjax("/ProviasNacionalApp/autorizaciones-especiales/agregar-mercancia",parametros,"mercancia");
	
}

function agregarFichaVehicular(){
	
	parametros = {foo: "bar" };
	 
	callAjax("/ProviasNacionalApp/autorizaciones-especiales/agregar-ficha-vehiculo",parametros,"ficha_vehicular");

}

function editarFichaVehicular(index){
	
	parametros = {'indexFichaVehicular': index };
	callAjax("/ProviasNacionalApp/autorizaciones-especiales/editar-ficha-vehiculo",parametros,"editar_FichaVehicular");
	$('#tabFormAuto').show('slow');
	$('#tabSolicitud').hide('slow');
	
}

function reloadData(){
oTable.fnReloadAjax();
}

</script>


<div class="tabs" id="tabSolicitud">
	<ul>
		<li><a href="#tabs-1">Formulario de Autorizacion Especial</a></li>
	</ul>
	<div id="tabs-1">

		<s:form action="generar-expediente" theme="simple" enctype="multipart/form-data"
			namespace="/autorizaciones-especiales" target="_blank" id="formGenerarExpediente" validate="true">
<input type="hidden" id="idEmpresa" name="expediente.idEmpresa"
	value="<s:property value="#session.ConsultaRolesUsuario.idUsuario" />" />
			<table width="100%" border="0" cellspacing="1" cellpadding="5"
				bgcolor="#D01313">
				<tr>
					<td bgcolor="#E9E9E8"><strong>Datos de la Empresa de
							transporte</strong>

						<div id="infoEmpresa"></div></td>
				</tr>
				<tr>
					<td bgcolor="#F4F4F3"><strong>Ingrese el archivo de
							solicitud:</strong> <input type="file" name="solicitud" id="solicitud" /></td>
				</tr>
				<tr>
					<td bgcolor="#E9E9E8"><strong>Itinerario</strong>
						<table border="0" cellpadding="3" cellspacing="1"
							bgcolor="#D01313">
							<tr>
								<td rowspan="3" bgcolor="#F9DBDB"><strong>Origen:</strong></td>
								<td bgcolor="#F9DBDB">Departamento</td>
								<td bgcolor="#F9DBDB"><select name="idDepartamento"
									id="idDepartamento_Origen">
										<option value="-1">-- Seleccione Opcion --</option>
								</select></td>
								<td rowspan="3" bgcolor="#F9DBDB"><strong>Fecha de
										Salida:</strong></td>
								<td rowspan="3" bgcolor="#F9DBDB"><input name="expediente.fechaSalida" type="text"
									id="fechaSalida" readonly="readonly" /></td>
							</tr>
							<tr>
								<td bgcolor="#F9DBDB">Provincia</td>
								<td bgcolor="#F9DBDB"><select name="idProvincia"
									id="idProvincia_Origen">
										<option value="-1">-- Seleccione Opcion --</option>
								</select></td>
							</tr>
							<tr>
								<td bgcolor="#F9DBDB">Distrito</td>
								<td bgcolor="#F9DBDB"><select id="idOrigen"
									name="expediente.idOrigen">
										<option value="-1">-- Seleccione Opcion --</option>
								</select></td>
							</tr>
							<tr>
								<td rowspan="3" bgcolor="#F9DBDB"><strong>Destino:</strong></td>
								<td bgcolor="#F9DBDB">Departamento</td>
								<td bgcolor="#F9DBDB"><select id="idDepartamento_Destino">
										<option value="-1">-- Seleccione Opcion --</option>
								</select></td>
								<td rowspan="3" bgcolor="#F9DBDB"><strong>Fecha de
										Llegada:</strong></td>
								<td rowspan="3" bgcolor="#F9DBDB"><input
									name="expediente.fechaLlegad" type="text" id="fechaLlegad" readonly="readonly" /></td>
							</tr>
							<tr>
								<td bgcolor="#F9DBDB">Provincia</td>
								<td bgcolor="#F9DBDB"><select name="idProvincia_Destino" id="idProvincia_Destino">
										<option value="-1">-- Seleccione Opcion --</option>
								</select></td>
							</tr>
							<tr>
								<td bgcolor="#F9DBDB">Distrito</td>
								<td bgcolor="#F9DBDB"><select id="idDestiono"
									name="expediente.idDestiono">
										<option value="-1">-- Seleccione Opcion --</option>
								</select></td>
							</tr>
						</table></td>
				</tr>
				<tr>
					<td bgcolor="#F4F4F3"><strong>Consignar ruta o rutas
							parciales a transitar</strong>
						<table border="0" cellpadding="3" cellspacing="1">
							<tr>
								<th>Ruta :</th>
								<th><input name="ruta" id="ruta" type="text" size="50" /></th>
								<th><input type="button" id="btnGuardarRuta"
									value="Guardar" class="button" onclick="agregarRuta();" /></th>
							</tr>
						</table>

						<div id="listRutas"></div></td>
				</tr>
				<tr>
					<td bgcolor="#E9E9E8"><strong>Requiere Apoyo
							Policial:</strong> <s:radio name="expediente.apoyoPolicial" id="expediente.apoyoPolicial"
							list="#{'1':'SI','0':'NO'}" /></td>
				</tr>
				<tr>
					<td bgcolor="#F4F4F3"><strong>Numero de vahiculos de
							apoyo:</strong> <select name="expediente.cantidadUnidades">
							<option>1</option>
							<option>2</option>
		          </select></td>
				</tr>
				<tr>
					<td bgcolor="#E9E9E8"><table border="0" cellpadding="3"
							cellspacing="1">
							<tr>
								<td align="right"><strong>Acciones</strong></td>
								<td><input type="button" name="btnAgregar"
									id="btnAgregarFormulario" value="Agregar Ficha Vehicular"
									class="button" /></td>
								<td><input type="button"
										name="btnEditar" id="btnEditar" value="Editar" class="button" />
								</td>
								<td><input type="button"
										name="btnEliminar" id="btnEliminar" value="Eliminar"
										class="button" />
								</td>
							</tr>
						</table></td>
				</tr>
				<tr>
					<td bgcolor="#F4F4F3"><strong><br />
				    Lista de fichas generadas:</strong><br />
					  <br />
						<table cellpadding="0" cellspacing="0" border="0" class="display"
							id="example">
							<thead>
								<tr>
									<th>Id</th>
									<th>Tipo</th>
									<th>Placa</th>
									<th>Modelo</th>
									<th>Marca</th>
									<th>Largo(mt)</th>
									<th>Anch(mt)o</th>
									<th>Alto(mt)</th>
									<th>Numero Ejes</th>
									<th>Nro Neumaticos</th>
									<th>Peso Total(Kg)</th>
								</tr>
							</thead>
							<tbody>
								
							</tbody>
							<tfoot>
								<tr>
									<th>Id</th>
									<th>Tipo</th>
									<th>Placa</th>
									<th>Modelo</th>
									<th>Marca</th>
									<th>Largo(mt)</th>
									<th>Anch(mt)o</th>
									<th>Alto(mt)</th>
									<th>Numero Ejes</th>
									<th>Nro Neumaticos</th>
									<th>Peso Total(Kg)</th>
								</tr>
							</tfoot>
						</table></td>
				</tr>
				<tr>
					<td bgcolor="#F4F4F3"><input name="Enviar" type="submit" class="button"
						value="Generar Expediente" /> <input
						type="submit" name="button2" id="button2" value="Cancelar"
						class="button" /></td>
				</tr>
			</table>

		</s:form>


	</div>

</div>

<div class="tabs" id="tabFormAuto" style="display: inline;">
	<ul>
		<li><a href="#tabs-1">Ficha Vehicular</a></li>
	</ul>
	<div id="tabs-2" style="padding: 10px;">
		<table width="100%" border="0" cellspacing="1" cellpadding="5"
			id="zebra" bgcolor="#D01313">
			<tr>
				<td bgcolor="#E9E9E8"><strong>Datos del vehiculo</strong>
					<form id="formVehiculo">
                    
                    <table border="0" cellpadding="3" cellspacing="1" bgcolor="#D01313">
						<tr>
							<td bgcolor="#F4F4F3"><strong>Tipo Unidad</strong></td>
							<td bgcolor="#F4F4F3"><strong>Marca</strong></td>
							<td bgcolor="#F4F4F3"><strong>Modelo</strong></td>
							<td bgcolor="#F4F4F3"><strong>Placa</strong></td>
							<td bgcolor="#F4F4F3"><strong>Largo(mt)</strong></td>
							<td bgcolor="#F4F4F3"><strong>Ancho(mt)</strong></td>
							<td bgcolor="#F4F4F3"><strong>Alto(mt)</strong></td>
						</tr>
						<tr>
							<td rowspan="3" bgcolor="#F4F4F3"><select name="tipoUnidad" id="tipoUnidad">
									<option value="-1" selected="selected">-- Seleccione Opcion --</option>
									<option>REMOLCADOR</option>
									<option>SEMI TRAILER</option>
									<option>CAMA BAJA</option>

						  </select></td>
							<td bgcolor="#F4F4F3"><input type="text"  name="marca" id="marca"
								size="15" /></td>
							<td bgcolor="#F4F4F3"><input type="text" id="modelo" name="modelo"
								size="15" /></td>
							<td bgcolor="#F4F4F3"><input type="text" id="placa" name="placa"
								size="15" /></td>
							<td bgcolor="#F4F4F3"><input type="text" id="largo" name="largo"
								size="15" /></td>
							<td bgcolor="#F4F4F3"><input type="text" id="ancho" name="ancho"
								size="15" /></td>
							<td bgcolor="#F4F4F3"><input type="text" id="alto" name="alto" size="15" /></td>
						</tr>
						<tr>
							<td bgcolor="#F4F4F3"><strong>Nro Ejes</strong></td>
							<td bgcolor="#F4F4F3"><strong>Nro Neumáticos</strong></td>
							<td colspan="4" bgcolor="#F4F4F3"><strong>Peso seco
									(TARA) KG</strong></td>
						</tr>
						<tr>
							<td bgcolor="#F4F4F3"><input type="text" id="numeroEjes" name="numeroEjes"
								size="15" /></td>
							<td bgcolor="#F4F4F3"><input type="text"
								id="numeroNeumaticos" name="numeroNeumaticos"  size="15" /></td>
							<td colspan="4" bgcolor="#F4F4F3"><input type="text"
								id="pesoTara" name="pesoTara" size="15" /></td>
						</tr>
						<tr>
							<td colspan="7" bgcolor="#F4F4F3"><input type="submit"
								id="btnAgregarVehiculo" value="Agregar Vehiculo" class="button"
								/></td>
						</tr>
					</table>
                    
                    </form>
                     <br />
					<div id="listVehiculos"></div> <br /> <strong>Autopropulsado
						y/o mercancia</strong> <br />
					
                  <form id="formMercancia">
                    
					<table border="0" cellpadding="3" cellspacing="1" bgcolor="#D01313">
						<tr>
							<td bgcolor="#F4F4F3"><strong>Tipo mercancia</strong></td>
							<td bgcolor="#F4F4F3"><strong>Largo(mt)</strong></td>
							<td bgcolor="#F4F4F3"><strong>Ancho(mt)</strong></td>
							<td bgcolor="#F4F4F3"><strong>Alto(mt)</strong></td>
							<td bgcolor="#F4F4F3"><strong>Peso(KG)</strong></td>
						</tr>
						<tr>
							<td bgcolor="#F4F4F3"><select id="descripcionMercancia" name="descripcionMercancia">
									<option value="-1">-- Seleccione Opcion --</option>
									<option>PRODUCTO1</option>
									<option>PRODUCTO2</option>
									<option>PRODUCTO3</option>
									<option>PRODUCTO4</option>
									<option>PRODUCTO5</option>
							</select></td>
							<td align="center" bgcolor="#F4F4F3"><input type="text"
								id="largoMercancia" name="largoMercancia" size="15" /></td>
							<td align="center" bgcolor="#F4F4F3"><input type="text"
								id="anchoMercancia" name="anchoMercancia" size="15" /></td>
							<td align="center" bgcolor="#F4F4F3"><input type="text"
								id="altoMercancia" name="altoMercancia" size="15" /></td>
							<td bgcolor="#F4F4F3"><input type="text" id="pesoMercancia" name="pesoMercancia"
								size="15" /></td>
						</tr>
						<tr>
							<td colspan="5" bgcolor="#F4F4F3"><input type="submit"
								value="Agregar Detalle" class="button"
								onclick="" /></td>
						</tr>
					</table>
                    
                    
                    </form>
                    
                  <br />
					<div id="listMercancias"></div> <br />
                    <div id="listTotales"></div>
					</td>
			</tr>
			<tr>
				<td bgcolor="#F4F4F3">
                <input type="button" name="btnGuardarFicha" id="btnGuardarFicha" value="Guardar Ficha Vehicular" class="button" onclick="agregarFichaVehicular()" /> <input type="button" name="btnCancelarForm" id="btnCancelarForm" value="Cancelar" class="button" /></td>
			</tr>
		</table>
	</div>
</div>
